import {Inject, Injectable, Renderer2, RendererFactory2} from '@angular/core';
import {EventManager} from '@angular/platform-browser';
import {DOCUMENT} from '@angular/common';
import {Message} from '../../model/v1/tip';

@Injectable()
export class TipService {
    dragEvent: boolean = false;
    private render: Renderer2;
    private _enter: boolean = false;
    eventList: Array<any> = new Array();

    constructor(rendererFactory: RendererFactory2, 
      @Inject(DOCUMENT) private document: HTMLElement,
      private eventManage: EventManager
    ) {
      this.render = rendererFactory.createRenderer(null, null);
    }

    open(message: Message) {
      /**
       * @param {top: 触发块元素的全局top, left: 可视窗口left, text：信息, background: 背景色 }
       * @description 获取可是窗口信息可以使用getBoundingClientRect方法
       * 在样式中显示了显示长度是60，高度为260.宽度为250.
       */
      if (this.dragEvent) return;
      if (!message.background) message.background = '#000';
      let tipDiv = this.render.createElement('div');
      let bodyHeight = this.document.querySelector('body').getBoundingClientRect().height;
      let span = this.render.createElement('span');
      tipDiv.className = 'tip-box';
      tipDiv.innerText = message.text.length > 60 ? message.text.slice(0, 60) + '...' : message.text;
      tipDiv.style = `bottom: ${bodyHeight - message.top + 10}px; left: ${message.left}px; background: ${message.background}`;
      span.style.color = message.background;
      this.render.appendChild(tipDiv, span);
      this.render.appendChild(this.document.querySelector('body'), tipDiv);
      this.eventList.push(
        this.eventManage.addEventListener(tipDiv, 'mouseenter', this.enterEvent.bind(this)),
        this.eventManage.addEventListener(tipDiv, 'mouseleave', this.leaveEvent.bind(this, message.text))
      );
    }

    enterEvent(event) {
      this._enter = true;
    }

    leaveEvent(text: string) {
      this._enter = false;
      this.close(text);
    }
    // 延时close
    closeTimeout(text: string) {
      setTimeout(() => {
        this.close(text);
      }, 0)
    }

    close(text: string) {
      if (this._enter) return;
      if (this.dragEvent) return;
      if (this.eventList.length !== 0) {
        this.eventList.forEach(item => {
          item();
        })
        this.eventList = [];
      }
      let tipDivs = this.document.querySelectorAll('div.tip-box');
      text = text.length > 60 ? text.slice(0, 60) + '...' : text;
      Array.prototype.slice.call(tipDivs).forEach(item => {
        if (item.innerText === text) {
          this.render.removeChild(this.document.querySelector('body'), item);
        }
      })
    }

    closeAll() {
      setTimeout(() => {
        Array.prototype.slice.call(this.document.querySelectorAll('div.tip-box')).forEach(item => {
          this.render.removeChild(this.document.querySelector('body'), item);
        })
      }, 0)
    }
}